<!--
  智慧社区管理系统 - 系统配置
  @author Wu.Liang
  @date 2024-01-01
  @updated 2025-07-28 - 设计美观的系统配置页面
-->
<template>
    <div class="system-config">
        <!-- 页面标题和描述 -->
        <div class="page-header">
            <div class="page-title">
                <h1>系统配置</h1>
                <p class="page-desc">管理系统基本配置、功能开关、安全设置等系统级参数</p>
            </div>
            <div class="page-actions">
                <el-button type="primary" :icon="Check" @click="handleSave">
                    保存配置
                </el-button>
                <el-button :icon="Refresh" @click="handleReset">
                    重置
                </el-button>
            </div>
        </div>

        <!-- 配置内容区域 -->
        <el-card class="config-card">
            <el-tabs v-model="activeTab" type="border-card">
                <!-- 基本信息配置 -->
                <el-tab-pane label="基本信息" name="basic">
                    <el-form 
                        ref="basicFormRef" 
                        :model="basicConfig" 
                        :rules="basicRules"
                        label-width="120px"
                        class="config-form"
                    >
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item label="系统名称" prop="systemName">
                                    <el-input 
                                        v-model="basicConfig.systemName" 
                                        placeholder="请输入系统名称"
                                        clearable
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="系统版本" prop="systemVersion">
                                    <el-input 
                                        v-model="basicConfig.systemVersion" 
                                        placeholder="请输入系统版本"
                                        clearable
                                    />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item label="管理员邮箱" prop="adminEmail">
                                    <el-input 
                                        v-model="basicConfig.adminEmail" 
                                        placeholder="请输入管理员邮箱"
                                        clearable
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="技术支持电话" prop="supportPhone">
                                    <el-input 
                                        v-model="basicConfig.supportPhone" 
                                        placeholder="请输入技术支持电话"
                                        clearable
                                    />
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-form-item label="系统描述" prop="systemDescription">
                            <el-input 
                                v-model="basicConfig.systemDescription" 
                                type="textarea" 
                                :rows="3"
                                placeholder="请输入系统描述"
                            />
                        </el-form-item>
                    </el-form>
                </el-tab-pane>

                <!-- 功能开关配置 -->
                <el-tab-pane label="功能开关" name="features">
                    <div class="feature-config">
                        <el-row :gutter="24">
                            <el-col :span="8">
                                <el-card class="feature-card" shadow="hover">
                                    <div class="feature-header">
                                        <el-icon class="feature-icon"><User /></el-icon>
                                        <span class="feature-title">用户注册</span>
                                    </div>
                                    <div class="feature-content">
                                        <p class="feature-desc">允许新用户注册账号</p>
                                        <el-switch 
                                            v-model="featureConfig.userRegistration" 
                                            active-text="开启"
                                            inactive-text="关闭"
                                        />
                                    </div>
                                </el-card>
                            </el-col>
                            
                            <el-col :span="8">
                                <el-card class="feature-card" shadow="hover">
                                    <div class="feature-header">
                                        <el-icon class="feature-icon"><Lock /></el-icon>
                                        <span class="feature-title">短信验证</span>
                                    </div>
                                    <div class="feature-content">
                                        <p class="feature-desc">登录时启用短信验证码</p>
                                        <el-switch 
                                            v-model="featureConfig.smsVerification" 
                                            active-text="开启"
                                            inactive-text="关闭"
                                        />
                                    </div>
                                </el-card>
                            </el-col>
                            
                            <el-col :span="8">
                                <el-card class="feature-card" shadow="hover">
                                    <div class="feature-header">
                                        <el-icon class="feature-icon"><Bell /></el-icon>
                                        <span class="feature-title">消息推送</span>
                                    </div>
                                    <div class="feature-content">
                                        <p class="feature-desc">启用系统消息推送功能</p>
                                        <el-switch 
                                            v-model="featureConfig.messagePush" 
                                            active-text="开启"
                                            inactive-text="关闭"
                                        />
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>

                        <el-row :gutter="24" style="margin-top: 20px;">
                            <el-col :span="8">
                                <el-card class="feature-card" shadow="hover">
                                    <div class="feature-header">
                                        <el-icon class="feature-icon"><Document /></el-icon>
                                        <span class="feature-title">数据导出</span>
                                    </div>
                                    <div class="feature-content">
                                        <p class="feature-desc">允许导出数据到Excel</p>
                                        <el-switch 
                                            v-model="featureConfig.dataExport" 
                                            active-text="开启"
                                            inactive-text="关闭"
                                        />
                                    </div>
                                </el-card>
                            </el-col>
                            
                            <el-col :span="8">
                                <el-card class="feature-card" shadow="hover">
                                    <div class="feature-header">
                                        <el-icon class="feature-icon"><Monitor /></el-icon>
                                        <span class="feature-title">系统监控</span>
                                    </div>
                                    <div class="feature-content">
                                        <p class="feature-desc">启用系统性能监控</p>
                                        <el-switch 
                                            v-model="featureConfig.systemMonitor" 
                                            active-text="开启"
                                            inactive-text="关闭"
                                        />
                                    </div>
                                </el-card>
                            </el-col>
                            
                            <el-col :span="8">
                                <el-card class="feature-card" shadow="hover">
                                    <div class="feature-header">
                                        <el-icon class="feature-icon"><Warning /></el-icon>
                                        <span class="feature-title">安全告警</span>
                                    </div>
                                    <div class="feature-content">
                                        <p class="feature-desc">启用安全事件告警</p>
                                        <el-switch 
                                            v-model="featureConfig.securityAlert" 
                                            active-text="开启"
                                            inactive-text="关闭"
                                        />
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
                </el-tab-pane>

                <!-- 安全设置配置 -->
                <el-tab-pane label="安全设置" name="security">
                    <el-form 
                        ref="securityFormRef" 
                        :model="securityConfig" 
                        :rules="securityRules"
                        label-width="120px"
                        class="config-form"
                    >
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item label="密码最小长度" prop="passwordMinLength">
                                    <el-input-number 
                                        v-model="securityConfig.passwordMinLength" 
                                        :min="6" 
                                        :max="20"
                                        controls-position="right"
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="密码复杂度" prop="passwordComplexity">
                                    <el-select v-model="securityConfig.passwordComplexity" placeholder="请选择密码复杂度">
                                        <el-option label="低" :value="1" />
                                        <el-option label="中" :value="2" />
                                        <el-option label="高" :value="3" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item label="会话超时时间" prop="sessionTimeout">
                                    <el-input-number 
                                        v-model="securityConfig.sessionTimeout" 
                                        :min="10" 
                                        :max="480"
                                        controls-position="right"
                                    />
                                    <span class="unit-text">分钟</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="登录失败锁定" prop="loginFailLock">
                                    <el-input-number 
                                        v-model="securityConfig.loginFailLock" 
                                        :min="3" 
                                        :max="10"
                                        controls-position="right"
                                    />
                                    <span class="unit-text">次</span>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-form-item label="锁定时间" prop="lockDuration">
                                    <el-input-number 
                                        v-model="securityConfig.lockDuration" 
                                        :min="5" 
                                        :max="60"
                                        controls-position="right"
                                    />
                                    <span class="unit-text">分钟</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="IP白名单" prop="ipWhitelist">
                                    <el-input 
                                        v-model="securityConfig.ipWhitelist" 
                                        placeholder="请输入IP地址，多个用逗号分隔"
                                        clearable
                                    />
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-form-item label="安全选项">
                            <el-checkbox-group v-model="securityConfig.securityOptions">
                                <el-checkbox value="enable_captcha">启用验证码</el-checkbox>
                                <el-checkbox value="enable_2fa">启用双因素认证</el-checkbox>
                                <el-checkbox value="enable_ip_check">启用IP检查</el-checkbox>
                                <el-checkbox value="enable_device_check">启用设备检查</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Check, Refresh, User, Lock, Bell, Document, Monitor, Warning } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'

// 当前激活的标签页
const activeTab = ref('basic')

// 表单引用
const basicFormRef = ref<FormInstance>()
const securityFormRef = ref<FormInstance>()

// 基本信息配置
const basicConfig = reactive({
    systemName: '智慧社区管理系统',
    systemVersion: 'v3.4.0',
    adminEmail: 'admin@smart-community.com',
    supportPhone: '400-123-4567',
    systemDescription: '基于Spring Cloud微服务架构的现代化社区管理平台，采用前后端分离架构设计，支持Web端和移动端应用。'
})

// 功能开关配置
const featureConfig = reactive({
    userRegistration: true,
    smsVerification: false,
    messagePush: true,
    dataExport: true,
    systemMonitor: true,
    securityAlert: true
})

// 安全设置配置
const securityConfig = reactive({
    passwordMinLength: 8,
    passwordComplexity: 2,
    sessionTimeout: 30,
    loginFailLock: 5,
    lockDuration: 15,
    ipWhitelist: '',
    securityOptions: ['enable_captcha', 'enable_ip_check']
})

// 表单验证规则
const basicRules: FormRules = {
    systemName: [
        { required: true, message: '请输入系统名称', trigger: 'blur' }
    ],
    systemVersion: [
        { required: true, message: '请输入系统版本', trigger: 'blur' }
    ],
    adminEmail: [
        { required: true, message: '请输入管理员邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
    ]
}

const securityRules: FormRules = {
    passwordMinLength: [
        { required: true, message: '请设置密码最小长度', trigger: 'blur' }
    ],
    passwordComplexity: [
        { required: true, message: '请选择密码复杂度', trigger: 'change' }
    ],
    sessionTimeout: [
        { required: true, message: '请设置会话超时时间', trigger: 'blur' }
    ]
}

// 保存配置
const handleSave = async () => {
    try {
        // 验证表单
        if (activeTab.value === 'basic') {
            await basicFormRef.value?.validate()
        } else if (activeTab.value === 'security') {
            await securityFormRef.value?.validate()
        }
        
        // 模拟保存操作
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        ElMessage.success('配置保存成功')
    } catch (error) {
        ElMessage.error('配置保存失败，请检查表单数据')
    }
}

// 重置配置
const handleReset = async () => {
    try {
        await ElMessageBox.confirm('确定要重置所有配置吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })
        
        // 重置配置
        Object.assign(basicConfig, {
            systemName: '智慧社区管理系统',
            systemVersion: 'v3.4.0',
            adminEmail: 'admin@smart-community.com',
            supportPhone: '400-123-4567',
            systemDescription: '基于Spring Cloud微服务架构的现代化社区管理平台，采用前后端分离架构设计，支持Web端和移动端应用。'
        })
        
        Object.assign(featureConfig, {
            userRegistration: true,
            smsVerification: false,
            messagePush: true,
            dataExport: true,
            systemMonitor: true,
            securityAlert: true
        })
        
        Object.assign(securityConfig, {
            passwordMinLength: 8,
            passwordComplexity: 2,
            sessionTimeout: 30,
            loginFailLock: 5,
            lockDuration: 15,
            ipWhitelist: '',
            securityOptions: ['enable_captcha', 'enable_ip_check']
        })
        
        ElMessage.success('配置已重置')
    } catch (error) {
        // 用户取消操作
    }
}
</script>

<style scoped>
.system-config {
    padding: 20px;
    background-color: #f5f7fa;
    min-height: calc(100vh - 120px);
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.page-title h1 {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 600;
    color: #303133;
}

.page-desc {
    margin: 0;
    color: #606266;
    font-size: 14px;
}

.page-actions {
    display: flex;
    gap: 12px;
}

.config-card {
    margin-bottom: 20px;
}

.config-form {
    padding: 20px 0;
}

.feature-config {
    padding: 20px 0;
}

.feature-card {
    margin-bottom: 20px;
    border: 1px solid #e4e7ed;
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.feature-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.feature-icon {
    font-size: 20px;
    color: #409eff;
    margin-right: 8px;
}

.feature-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
}

.feature-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.feature-desc {
    margin: 0;
    color: #606266;
    font-size: 14px;
    flex: 1;
}

.unit-text {
    margin-left: 8px;
    color: #909399;
    font-size: 14px;
}

:deep(.el-tabs__content) {
    padding: 20px;
}

:deep(.el-form-item__label) {
    font-weight: 500;
    color: #303133;
}

:deep(.el-input-number) {
    width: 100%;
}

:deep(.el-select) {
    width: 100%;
}
</style>
